<template>
<div>
   <div class="g_top_box">
		<div class="g_right_box"></div> 
		<div class="g_left_box"><h4>文章信息</h4></div>
	</div>
	<div class="g_content_box">

		<Form :model="info" label-position="left" :label-width="100">
			
			<FormItem label="分类">
				<Select v-model="info.cat_id" style="width:200px">
					<Option :value="0" >请选择</Option>
					<Option v-for="(item,index) in cat_list" :value="item.id" :key="index">{{ item.name }}</Option>
				</Select>
			</FormItem>
			<FormItem label="标题">
				<Input v-model="info.title" style="width:600px;"></Input>
			</FormItem>
			<FormItem label="简介内容">
				<Input v-model="info.info" type="textarea" style="width:600px;"></Input>
			</FormItem>
			<FormItem label="图片">
				<div class="img_box" style="float:left;" v-show="info.img!=''">
					<img :src="info.img">
				</div>
				<Upload 
					:action="upload_url" 
					:on-success="handleSuccess"
					:format="['jpg','jpeg','png']"
					:max-size="2048"
					:on-format-error="handleFormatError"
					style="display: inline-block;"
					:show-upload-list="false"
				>
					<Button icon="ios-cloud-upload-outline">上传图片</Button>
				</Upload>
			</FormItem>
			<FormItem label="详细内容">
				<div id="content">
					
				</div>
			</FormItem>
			
			<FormItem>
				<Button type="primary" @click="save">提交</Button>
			</FormItem>
		</Form>

	</div>
</div>
</template>

<script>
import Wcore from '@/libs/common';
var E = require('wangeditor');

export default {
    name: 'admin_info',
    data (){
		
        return {
            info:{
				cat_id:0,
				title:'',
				img:'',
				info:'',
				content:''
			},
			upload_url:'',
			editor:null,
			cat_list:[]
        };
    },
	created(){
		this.upload_url = Whttp.upload_url;
		this.$emit('change','user');
		this.load_cat();
	},
	mounted(){
		
		this.editor = new E('#content')
		this.editor.create()
		
	},
	methods:{
		load_cat(){
			var self = this;
			var postdata = {
				parent_id:0
			}
			Whttp.load('Article/Article_cat/get_cat_list',postdata,function(result){
				self.cat_list = result;
			});
		},
		save(){
			var self = this;
			var postdata = {
				id:this.id,
				cat_id:this.info.cat_id,
				title:this.info.title,
				info:this.info.info,
				img:this.info.img,
				content:this.editor.txt.html()
			};
			Whttp.load('Article/Article/save',postdata,function(result){
				self.$Message.info('添加成功');
				self.$router.back();
			});
		},
		handleSuccess (res, file) {
			if(res.result_code==0){
				var url = res.data[0].url;
				this.info.img = url;
			}
		},
		handleFormatError (file) {
			this.$Notice.warning({
				title: 'The file format is incorrect',
				desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
			});
		},
		
	}
};
</script>
<style scoped>
.img_box{
	display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
}
.img_box img{width:100%;height:100%;}
</style>